<template>
  <div class="rank">
    <span class="all">全球榜</span>
    <hr class="line" />
    <div class="gedanMainm" ref="gedan">
      <Car :playlist="playlist" width="140px" height="180px" />
    </div>
  </div>
</template>
<script>
import carList from "./catList.vue";
export default {
  mounted() {
    this.load = this.$loading.show();
    this.$api.toplist().then((res) => {
      let a = [];
      res.list.map((item) => {
        let b = {
          id: item.id,
          playCount: item.playCount,
          name: item.name,
          coverImgUrl: item.coverImgUrl,
        };
        a.push(b);
      });
      this.playlist = a;
      this.load.hide();
    });
  },
  components: {
    Car: carList,
  },
  data() {
    return {
      playlist: [],
      load: "",
    };
  },
};
</script>
<style lang="less" scoped>
.rank {
  .all {
    display: block;
    margin: 10px 0;
  }
  .line {
    color: gray;
    margin-top: 10px;
  }
}
</style>
